<template>
  <div class="container">
    <MainNav
        :all-categories="allCategories"
        @filter-change="handleFilterChange"
        @login-success="handleLoginSuccess"
        @logout="handleLogout"
    />

    <header class="header">
      <h1 class="site-title">联系我们</h1>
      <p class="update-time">如有任何问题、建议或合作意向，请通过以下方式与我们联系</p>
    </header>

    <main class="contact-feed">
      <div class="contact-wrapper">
        <div class="contact-info">
          <div class="info-section">
            <h2 class="section-title">联系方式</h2>
            <ul class="contact-details">
              <li class="contact-item">
                <Icon name="fa-solid:envelope" class="contact-icon" />
                <div class="contact-text">
                  <span class="label">邮箱：</span>
                  <NuxtLink href="#" class="value">contact@financebrief.com</NuxtLink>
                </div>
              </li>
              <li class="contact-item">
                <Icon name="fa-solid:phone" class="contact-icon" />
                <div class="contact-text">
                  <span class="label">电话：</span>
                  <NuxtLink href="#" class="value">+86 123 4567 8901</NuxtLink>
                </div>
              </li>
              <li class="contact-item">
                <Icon name="fa-solid:map-marker-alt" class="contact-icon" />
                <div class="contact-text">
                  <span class="label">地址：</span>
                  <span class="value">xxxx/xxxx/xxxx/xxxx</span>
                </div>
              </li>
              <li class="contact-item">
                <Icon name="fa-solid:clock" class="contact-icon" />
                <div class="contact-text">
                  <span class="label">工作时间：</span>
                  <span class="value">周一至周五 9:00 - 18:00</span>
                </div>
              </li>
            </ul>
          </div>

          <div class="info-section">
            <h2 class="section-title">关注我们</h2>
            <div class="social-links">
              <NuxtLink href="#" class="social-link weixin" aria-label="微信公众号">
                <Icon name="fa-brands:weixin" class="social-icon" />
              </NuxtLink>
              <NuxtLink href="#" class="social-link weibo" aria-label="微博">
                <Icon name="fa-brands:weibo" class="social-icon" />
              </NuxtLink>
              <NuxtLink href="#" class="social-link linkedin" aria-label="LinkedIn">
                <Icon name="fa-brands:linkedin" class="social-icon" />
              </NuxtLink>
              <NuxtLink href="#" class="social-link twitter" aria-label="Twitter">
                <Icon name="fa-brands:twitter" class="social-icon" />
              </NuxtLink>
              <NuxtLink href="#" class="social-link facebook" aria-label="Facebook">
                <Icon name="fa-brands:facebook" class="social-icon" />
              </NuxtLink>
            </div>
          </div>
        </div>

        <div class="contact-form-container">
          <h2 class="form-title">发送消息</h2>
          <form class="contact-form" @submit.prevent="handleSubmit">
            <div class="form-group">
              <label for="name" class="form-label">姓名</label>
              <input
                  type="text"
                  id="name"
                  v-model="formData.name"
                  class="form-input"
                  required
                  placeholder="请输入您的姓名"
              >
            </div>

            <div class="form-group">
              <label for="email" class="form-label">邮箱</label>
              <input
                  type="email"
                  id="email"
                  v-model="formData.email"
                  class="form-input"
                  required
                  placeholder="请输入您的邮箱地址"
              >
            </div>

            <div class="form-group">
              <label for="subject" class="form-label">主题</label>
              <el-select
                  v-model="formData.subject"
                  placeholder="请选择消息主题"
                  class="custom-select"
                  required
                  @change="handleSubjectChange"
                  clearable
              >
                <el-option
                    v-for="(option, index) in subjectOptions"
                    :key="index"
                    :label="option.label"
                    :value="option.value"
                />
              </el-select>
            </div>

            <div class="form-group">
              <label for="message" class="form-label">消息内容</label>
              <textarea
                  id="message"
                  v-model="formData.message"
                  class="form-textarea"
                  required
                  rows="5"
                  placeholder="请详细描述您的需求或问题..."
              ></textarea>
            </div>

            <div class="form-actions">
              <button type="submit" class="submit-btn" :disabled="isSubmitting || !isFormValid">
                <span v-if="!isSubmitting">发送消息</span>
                <span v-if="isSubmitting">发送中...</span>
                <Icon name="fa-solid:paper-plane" class="send-icon" />
              </button>
            </div>
          </form>
        </div>
      </div>
    </main>

    <footer class="footer">
      <MainFooter />
    </footer>

    <div v-if="showSuccessModal" class="modal-backdrop" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">发送成功</h3>
          <button class="close-btn" @click="closeModal">
            <Icon name="fa-solid:times" />
          </button>
        </div>
        <div class="modal-body">
          <p>感谢您的留言！我们会尽快与您联系。</p>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="closeModal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainNav from '@/components/MainNav/MainNav.vue';
import newsData from '../../../public/data/news.json';
import MainFooter from '@/components/Footer/MainFooter.vue';
// 定义表单数据类型
interface FormData {
  name: string;
  email: string;
  subject: string;
  message: string;
}

// 定义主题选项类型
interface SubjectOption {
  label: string;
  value: string;
}

// 定义用户信息接口
interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

// 表单状态
const formData = ref<FormData>({
  name: '',
  email: '',
  subject: '',
  message: ''
});

// 主题选项列表
const subjectOptions: SubjectOption[] = [
  { label: '意见反馈', value: 'feedback' },
  { label: '商务合作', value: 'cooperation' },
  { label: '信息咨询', value: 'information' },
  { label: '投诉建议', value: 'complaint' },
  { label: '其他事项', value: 'other' }
];

// 提交状态和验证
const isSubmitting = ref<boolean>(false);
const showSuccessModal = ref<boolean>(false);
const isFormValid = computed(() => {
  return formData.value.name && formData.value.email && formData.value.subject && formData.value.message;
});

// 处理主题选择变化
const handleSubjectChange = (value: string) => {
  formData.value.subject = value;
};

// 获取所有分类（用于导航栏）
const allCategories = computed<string[]>(() => [
  ...new Set(newsData.map((item: any) => item.category))
])

// 处理表单提交
const handleSubmit = async () => {
  if (!isFormValid.value) return;

  isSubmitting.value = true;

  // 模拟API请求
  try {
    await new Promise(resolve => setTimeout(resolve, 1500));
    // API请求
    console.log('表单提交数据:', formData.value);

    // 显示成功弹窗
    showSuccessModal.value = true;

    // 重置表单
    formData.value = {
      name: '',
      email: '',
      subject: '',
      message: ''
    };
  } catch (error) {
    console.error('提交失败:', error);
    alert('提交失败，请稍后再试');
  } finally {
    isSubmitting.value = false;
  }
};

// 关闭弹窗
const closeModal = () => {
  showSuccessModal.value = false;
};

// 筛选相关方法（用于导航栏）
const activeCategory = ref<string>('all');
const selectedDate = ref<string>('');

const handleFilterChange = (filters: { category: string; date: string }) => {
  activeCategory.value = filters.category;
  selectedDate.value = filters.date;
};

// 用户状态管理
const isLoggedIn = ref<boolean>(false);
const userInfo = ref<User>({
  id: '',
  name: '',
  email: '',
  avatar: ''
});

const handleLoginSuccess = (user: User) => {
  isLoggedIn.value = true;
  userInfo.value = user;
};

const handleLogout = () => {
  isLoggedIn.value = false;
  userInfo.value = {
    id: '',
    name: '',
    email: '',
    avatar: ''
  };
};

// 配置页面元信息
useHead({
  title: '联系我们 - 金融简讯',
  titleTemplate: '%s | 金融简讯',
  meta: [
    {
      name: 'description',
      content: '如有任何问题、建议或合作意向，请通过邮箱、电话或在线表单与金融简讯团队联系，我们将尽快回复。'
    },
    {
      name: 'keywords',
      content: '联系我们, 金融简讯联系方式, 金融咨询, 商务合作'
    }
  ]
})
</script>

<style scoped>
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-title {
  font-size: 2.2rem;
  margin: 0 0 8px 0;
  color: #222;
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.site-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3498db, transparent);
  border-radius: 3px;
}

.update-time {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
  font-weight: 400;
}

.contact-feed {
  margin-bottom: 30px;
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.contact-info {
  flex: 1;
  min-width: 300px;
}

.contact-form-container {
  flex: 1;
  min-width: 300px;
}

.info-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.info-section:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border-color: #f0f0f0;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 1.3rem;
  color: #2c3e50;
  font-weight: 700;
  position: relative;
  padding-left: 5px;
  line-height: 1.3;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #3498db;
}

.contact-details {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  transition: transform 0.2s ease;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item:hover {
  transform: translateX(3px);
}

.contact-icon {
  color: #3498db;
  width: 1.5em;
  height: 1.5em;
  margin-right: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

.contact-text {
  flex: 1;
}

.label {
  color: #777;
  font-weight: 500;
  display: inline-block;
  min-width: 60px;
}

.value {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.2s ease;
}

.value:hover {
  color: #3498db;
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 5px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid #e1e4e8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.social-link:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border-color: transparent;
}

.social-icon {
  width: 1.2em;
  height: 1.2em;
}

/* 品牌颜色 */
.weixin .social-icon {
  color: #07C160;
}

.weibo .social-icon {
  color: #E6162D;
}

.linkedin .social-icon {
  color: #0077B5;
}

.twitter .social-icon {
  color: #1DA1F2;
}

.facebook .social-icon {
  color: #1877F2;
}

.form-title {
  margin: 0 0 15px 0;
  font-size: 1.3rem;
  color: #2c3e50;
  font-weight: 700;
  position: relative;
  padding-left: 5px;
  line-height: 1.3;
}

.form-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #3498db;
}

.contact-form-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid transparent;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 500;
  color: #666;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.form-label::after {
  content: '*';
  color: #e74c3c;
  margin-left: 4px;
  font-size: 0.8rem;
}

.form-input, .form-textarea {
  padding: 10px 12px;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background-color: #fff;
  color: #333;
}

.form-input:focus, .form-textarea:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.custom-select {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-select__wrapper) {
  padding: 0.7rem;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  height: auto;
  transition: all 0.3s ease;
}

:deep(.el-select .el-select__clear) {
  color: #999;
}

:deep(.el-select .el-select__clear:hover) {
  color: #e74c3c;
}

:deep(.el-select .el-select__wrapper:focus-within) {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  outline: none;
}

:deep(.el-select .el-select__placeholder) {
  font-size: 0.9rem;
}

:deep(.el-select-dropdown__item) {
  padding: 8px 15px;
  font-size: 0.9rem;
}

:deep(.el-select-dropdown__item:hover) {
  background-color: #f1f5f9;
  color: #3498db;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: #f1f5f9;
  color: #3498db;
  font-weight: 500;
}

.form-actions {
  margin-top: 10px;
}

.submit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.submit-btn:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.submit-btn:disabled {
  background-color: #999;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.send-icon {
  width: 1em;
  height: 1em;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-20px);
  animation: slideIn 0.3s ease-out forwards;
  overflow: hidden;
}

@keyframes slideIn {
  to { transform: translateY(0); }
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  margin: 0;
  font-size: 1.1rem;
  color: #222;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s ease;
}

.close-btn:hover {
  color: #e74c3c;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.modal-body p {
  margin: 0;
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.confirm-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.confirm-btn:hover {
  background-color: #2980b9;
}

.footer {
  text-align: center;
  margin-top: 40px;
  padding: 25px 15px 15px;
  border-top: 1px solid #eee;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .site-title {
    font-size: 1.8rem;
  }

  .contact-wrapper {
    gap: 15px;
  }

  .contact-info, .contact-form-container {
    min-width: 100%;
  }

  .contact-form-container, .info-section {
    padding: 15px;
  }

  .section-title, .form-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }

  .social-links {
    gap: 8px;
  }

  .social-link {
    width: 36px;
    height: 36px;
  }

  .form-group {
    gap: 5px;
  }

  .form-input, .form-textarea {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  :deep(.el-select .el-select__input),
  :deep(.el-select .el-select__placeholder) {
    font-size: 0.9rem;
  }
}
</style>
